<template>
  <div class="ivu-spin" style="display:flex;width: 100%;height:100%;align-items: center;justify-content: center">
    <!-- 网络连接异常！ -->
    <div class="load-fail" v-if="isReload">
      <img :src="require('@/assets/image/icon_offline.png')">
      <p>网络连接异常,点击重新加载！</p>
      <span class="btn" @click.stop="onReload">重新加载</span>
    </div>
    <!-- 加载动画 -->
    <div class="load-3" v-else>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isReload: false
    };
  },
  methods: {
    isReloading() {
      this.isReload = true;
    },
    onReload() {
      this.isReload = false;
      this.$emit('on-reload');
    }
  }
};
</script>
<style lang="less" scoped>
.ivu-spin{
  .load{
    &-fail{
      img{
        width: 84px;
        height: 84px;
        margin: 0 auto;
      }
      p{
        font-size: 14px;
        color: #343434;
        margin:30px 0 40px;
      }
      .btn{
        cursor: pointer;
        background:linear-gradient(90deg,rgba(249,195,78,1),rgba(248,158,39,1));
        color: #fff;
        font-size: 14px;
        padding: 10px 40px;
        border-radius: 4px;
      }
    }
  }
}
</style>